<template>
	<view class="registration-process">
		<view class="fz24 bold mb25">
			{{planTitle}}
		</view>
		<view class="mb40">
			<view class="input-line flex align-c">
				<u-input v-if="plan === 0" v-model="phone" maxlength='11' :clearable="false" placeholder='请输入手机号'
					type="text" />
				<u-button v-if="plan === 0" class="get-code-box" @click='getCode' :throttle-time='throttle_time'
					:disabled='countdown!=60000'>{{showCountdown}}</u-button>
				<u-input v-if="plan === 1" v-model="uset_name" :clearable="false" placeholder='请输入您的真实姓名' type="text" />
				<u-input v-if="plan === 2" v-model="password" :clearable="false" placeholder='请输入密码' type="text" />
			</view>
			<view class="input-line flex align-c mb20">
				<u-input v-if="plan === 0" v-model="verification_code" :clearable="false" placeholder='请输入验证码'
					type="text" />
				<u-input v-if="plan === 1" v-model="uset_identification_card" :clearable="false" placeholder='请输入您的身份证号'
					type="text" />
				<u-input v-if="plan === 2" v-model="verify_password" :clearable="false" placeholder='再次确认密码'
					type="text" />
			</view>
			<!-- <u-input
				style="border-bottom: 1px solid #ededed;margin-top: -30rpx;padding:10rpx 0 20rpx 0;margin-bottom: 10rpx;"
				v-if="plan === 0&&applyStatus==0" v-model="verify_yaoq" :clearable="false" placeholder='请输入邀请码'
				type="text" /> -->
			<u-input v-if="plan === 0"
				style="border-bottom: 1px solid #ededed;margin-top: -30rpx;padding:10rpx 0 20rpx 0;margin-bottom: 10rpx;" v-model="verify_yaoq" :clearable="false" placeholder='请输入邀请码(非必填)'
				type="text" />
			<view class="fz12 c9" style="display: flex;" v-if="plan === 2">
				<u-checkbox @change="checkboxChange" v-model="checked"></u-checkbox>
				<view style="margin-left:-20rpx;">
					注册即代表您已阅读并同意<text style="color: #BC8523;" @click="goPolicy">《隐私政策协议》</text>
				</view>
			</view>
		</view>
		<view class="controls-btn-box" :class="plan === 0 ? 'zhong' : 'space-between'">
			<u-button v-if="plan !== 0" class="controls-btn controls-btn-double"
				@click='proceedPreviousStep'>上一步</u-button>
			<u-button v-if="plan !== 2" class="controls-btn" :class="{'controls-btn-double':plan!==0}"
				@click='proceedNextStep'>下一步</u-button>
			<u-button v-if="plan === 2" class="controls-btn controls-btn-double" @click='registered'>注册</u-button>
		</view>

		<view class="go-and-log-in fz12 c9">
			已有账号？<text @click="backPath" style="color: #BC8523;">去登录</text>
		</view>
	</view>
</template>

<script>
	import {
		setTokenStorage
	} from '@/utils/token';
	import logger from '@/utils/logger';
	import {
		genTestUserSig
	} from '@/debug/GenerateTestUserSig.js';
	const {
		getTokenStorage
	} = require('@/utils/token.js');
	const app = getApp();
	import {
		sendVerificationCode,
		phoneVerificationCode,
		userRegister
	} from '@/network/loginAndMy.js'
	import {
		taskscore,
		config
	} from '@/network/api.js'
	export default {
		data() {
			return {
				phone: '', // 手机号
				verification_code: '', // 验证码
				uset_name: '', // 用户姓名
				uset_identification_card: '', // 身份证
				password: '', // 密码
				verify_password: '', // 确认密码
				plan: 0, // 注册进度
				code_time: null, // 验证码定时器
				countdown: 60000, // 验证码倒计时
				throttle_time: null, // 验证码按钮
				type: '', //判断新用户注册领取积分,''代表正常注册
				userID: '',
				verify_yaoq: '', //邀请码
				checked: false,
				applyStatus: ''
			}
		},
		computed: {
			planTitle() {
				let show_title = ['注册账户', '实名认证', '设置密码']
				return show_title[this.plan]
			},
			showCountdown() {
				return this.countdown == 60000 ? '获取验证码' : this.countdown / 1000
			},
		},
		onLoad(options) {
			this.type = options.type
			this.configRe()
		},
		methods: {
			// gengx() {
			// 	uni.$TUIKit.updateMyProfile({
			// 			nick:this.info.nickname,
			// 			avatar: this.info.avatar,
			// 			gender: uni.$TUIKitTIM.TYPES.GENDER_MALE,
			// 			selfSignature: '我的个性签名',
			// 			allowType: uni.$TUIKitTIM.TYPES.ALLOW_TYPE_ALLOW_ANY
			// 		}).then(imResponse => {
			// 			console.log(imResponse, '成功11111111111111111111111111111')
			// 		})
			// 		.catch(err => {
			// 			console.log(err, '报错00000000000000000000000')
			// 		})
			// },
			configRe() {
				config().then(res => {
					this.applyStatus = res.data.applyStatus
				})
			},
			// 获取验证码
			getCode() {
				if (this.contentVerify()) {
					this.throttle_time = 2000
					return
				}

				this.sendVerificationCode()
				this.throttle_time = 60000
				this.code_time = setInterval(() => {
					this.countdown = this.countdown - 1000
					if (this.countdown === 0) {
						clearInterval(this.code_time);
						this.countdown = 60000
						return
					}
				}, 1000)
			},
			// 返回上一页
			backPath() {
				// uni.navigateBack({
				// 	delta: 1
				// });
				uni.reLaunch({
					url: '/pages/subpackage/landing_operation/logIn'
				});
			},
			// 继续下一步
			proceedNextStep() {
				if (this.plan === 0 && !this.contentVerify()) {
					if (this.verification_code == '') {
						uni.showToast({
							title: '请输入验证码',
							duration: 2000,
							icon: 'none'
						});
					} else {
						this.phoneVerificationCode()
					}
				} else {
					if (!this.contentVerify()) {
						this.plan = ++this.plan
					}
				}
			},
			// 继续上一步
			proceedPreviousStep() {
				this.plan = --this.plan
			},
			// 注册
			registered() {
				let that = this
				if (!that.contentVerify()) {
					if (this.checked) {
						let params = {
							username: that.uset_name,
							password: that.password,
							idcard: that.uset_identification_card,
							mobile: that.phone,
							unumber: that.verify_yaoq //邀请码（上级个人编号)
						}
						userRegister(params).then(res => {
							if (res.code == 1) {
								this.userID = res.data.userinfo.ownid + ''
								uni.setStorageSync('token1', res.data.userinfo.token);
								uni.setStorageSync('phone', that.phone);
								this.login()
								// that.taskscoreRe()
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/main/index/index'
									});
								}, 500)
							}
						})
					} else {
						uni.showToast({
							title: '请阅读后勾选隐私政策协议',
							duration: 2000,
							icon: 'none'
						});
					}

				}
			},
			// 新用户领取积分
			taskscoreRe() {
				let data = {
					flag: this.type
				}
				if (this.type != '') {
					taskscore(data).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: "已领取新用户奖励",
								icon: "none",
								duration: 2000,
							});
						}
					})
				}

			},
			// 发送验证码
			sendVerificationCode() {
				sendVerificationCode({
					userphone: this.phone
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			// 手机验证码验证
			phoneVerificationCode() {
				let params = {
					mobile: this.phone,
					captcha: this.verification_code
				}
				phoneVerificationCode(params).then(res => {
					if (res.code == 1) {
						this.plan = ++this.plan
					}
				})
			},
			login() {
				const userID = this.userID;
				const userSig = genTestUserSig(userID).userSig;
				const SDKAppID = app.globalData.SDKAppID;
				logger.log(`TUI-login | login  | userSig:${userSig} userID:${userID}`);
				// #ifdef  APP-PLUS
				uni.$aegis.reportEvent({
					name: 'platform',
					ext1: 'platform-APP',
					ext2: 'uniTuikitExternal',
					ext3: `${SDKAppID}`,
				})
				// #endif
				// #ifdef MP-WEIXIN  
				uni.$aegis.reportEvent({
					name: 'platform',
					ext1: 'platform-MP-WEIXIN',
					ext2: 'uniTuikitExternal',
					ext3: `${SDKAppID}`,
				})
				// #endif
				// #ifdef H5
				uni.$aegis.reportEvent({
					name: 'platform',
					ext1: 'platform-H5',
					ext2: 'uniTuikitExternal',
					ext3: `${SDKAppID}`,
				})
				uni.showToast({
					title: 'TUIKit 暂不支持 H5 / web ，请使用者自己完成兼容哦～ ',
					icon: 'none',
					duration: 3000
				});
				// #endif
				app.globalData.userInfo = {
					userSig,
					userID
				};
				setTokenStorage({
					userInfo: app.globalData.userInfo
				});
				wx.setStorageSync(`TIM_${getApp().SDKAppID}_isTUIKit`, true);
				uni.$TUIKit.login({
					userID: userID,
					userSig: userSig
				}).then(() => {
					uni.$aegis.reportEvent({
						name: 'login',
						ext1: 'login-success',
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`,
					})
				}).catch((error) => {
					uni.$aegis.reportEvent({
						name: 'login',
						ext1: `login-failed#error:${error}`,
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`,
					})
				})

				// 登录原生插件
				// #ifdef APP-PLUS
				if (typeof(uni.$TUICalling) == 'undefined') {
					uni.showToast({
						title: '如果需要音视频功能，请集成插件使用真机运行并且自定义基座调试哦～',
						icon: 'none',
						duration: 3000
					});
					logger.error(
						'请使用真机运行并且自定义基座调试，否则影响音视频功能～ 插件地址：https://ext.dcloud.net.cn/plugin?id=7097 , 调试地址：https://nativesupport.dcloud.net.cn/NativePlugin/use/use'
					);
				} else {
					uni.$TUICalling.login({
							sdkAppID: SDKAppID,
							userID: userID,
							userSig: userSig
						},
						res => {
							console.log(JSON.stringify(res.msg));
							uni.showToast({
								title: 'login',
								icon: 'none'
							});
						}
					);
				}

				// #endif
				uni.showToast({
					title: "登陆成功",
					icon: "none",
					duration: 2000,
				});
				// this.gengx()
				// if (this.path && this.path !== 'undefined') {
				// 	uni.redirectTo({
				// 		url: this.path
				// 	});
				// } else {
				// 	uni.switchTab({
				// 		url: '../TUI-Index/index'
				// 	});
				// }
			},
			// 跳转隐私协议
			goPolicy() {
				uni.navigateTo({
					url: '/pages/subpackage/my/policy?type=' + 2
				})
			},
			// 输入内容验证
			contentVerify() {
				if (this.plan === 0 && this.phone == '') {
					uni.showToast({
						title: '手机号不可为空',
						duration: 2000,
						icon: 'none'
					});
					return true
				}

				let regu = /^1[3-9][0-9]{9}$/
				if (this.plan === 0 && !regu.test(this.phone)) {
					uni.showToast({
						title: '请输入有效的手机号码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}



				if (this.plan === 1 && this.uset_name == '') {
					uni.showToast({
						title: '请输入你的姓名',
						duration: 2000,
						icon: 'none'
					});
					return true
				}

				if (this.plan === 1 && this.uset_identification_card == '') {
					uni.showToast({
						title: '请输入你的身份证号',
						duration: 2000,
						icon: 'none'
					});
					return true
				}

				if (this.plan === 2 && this.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}

				// let regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,16}$/
				// if (this.plan === 2 && !regex.test(this.password)) {
				// 	uni.showToast({
				// 		title: '用户密码长度必须介于 8 和 16 之间包含大写字母、小写字母、数字和特殊符号',
				// 		duration: 3000,
				// 		icon: 'none'
				// 	});
				// 	return true
				// }

				if (this.plan === 2 && this.verify_password == '') {
					uni.showToast({
						title: '请输入确定密码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}

				if (this.plan === 2 && this.password !== this.verify_password) {
					uni.showToast({
						title: '两次输入密码不一致!',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
				return false
			},
		},
		beforeDestroy() {
			clearInterval(this.code_time);
		},
	}
</script>

<style lang="scss">
	.registration-process {
		padding: 100rpx 30rpx 0;
		box-sizing: border-box;
		height: 100vh;

		.input-line {
			height: 110rpx;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 1rpx solid #EDEDED;

			.get-code-box {
				width: 150rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				border: 1rpx solid #E3BA5B;
				border-radius: 23rpx;
				color: #BB8422;
				margin: 0 !important;
				padding: 0 !important;
				font-size: 24rpx;
			}

			uni-button:after {
				content: " ";
				border: none !important;
			}
		}

		.controls-btn-box {
			.controls-btn {
				border: none;
				margin: 0 !important;
				padding: 0 !important;
				font-size: 36rpx;
				color: #ffffff;
				background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
				border-radius: 10rpx;
				height: 90rpx;
				line-height: 90rpx;
				width: 600rpx;
			}

			.controls-btn-double {
				width: 300rpx !important;
			}

			uni-button:after {
				content: " ";
				border: none !important;
			}
		}

		.go-and-log-in {
			position: fixed;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>